import axios from "axios";
import { useEffect, useState } from "react";

function App() {
  type ListType = {
    name: string
    id: number
  }[]
  const [list, setList] = useState<ListType>([])
  // useEffect 函数不涉及任何泛型参数，在 ts 中使用和 js 使用完全一致
  useEffect(() => {
    const fetchData = async () => {
      const res = await axios.get(`http://geek.itheima.net/v1_0/channels`)
      setList(res.data.data.channels)
    }
    fetchData()
  }, [])

  return (
    <ul>
      {list.map(item => {
        return <li key={item.id}>{item.name}</li>
      })}
    </ul>
  );
}

export default App;
